<template>
    <el-scrollbar>
      <el-menu style="height: 100vh"
               active-text-color="#ffd04b"
               background-color="#545c64"
               text-color="#fff"
               default-active="groupManage"
               :collapse="collapse"
               :collapse-transition="false"
               router
      >
<!--        <el-menu-item index="home">-->
<!--          <el-icon><HomeFilled /></el-icon>首页-->
<!--        </el-menu-item>-->
        <el-menu-item index="groupManage">
          <el-icon><Comment /></el-icon>群组管理
        </el-menu-item>
        <el-menu-item index="answer">
          <el-icon><UserFilled /></el-icon>答者管理
        </el-menu-item>
        <el-menu-item index="questionnaire">
          <el-icon><List /></el-icon>问卷管理
        </el-menu-item>
      </el-menu>
    </el-scrollbar>

</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      collapse:false
    }
  },
  computed : {
    "menu":{
      get(){
        return this.$store.state.menu
      }
    }
  }
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>